<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <input type="text" onkeyup="myOnkeyUp()">
  <span>这是一个span标签</span>
  <img src="../向右-小.png" alt="图片加载失败" title="这是一个提示图片" width="100px" height="100px"> 


</body>
<script>
    // // 事件源
    // let button = document.querySelector('input')
    // // 绑定事件类型(点击事件)
    // // 函数设定了事件处理程序
    // button.onclick = function() {
    //     alert("Hello")
    // }
    // 事件源
    let input = document.querySelector('input')
    input.onkeydown = function(event) {
        // console.log("键盘正在按下");
        // let a = event.keyCode;      
        // let b = String.fromCharCode(a)
        // console.log(b)    
        // 如果按键按下的是shift此时弹出一个弹窗，提示shift被按下
        if(event.shiftKey) {
            alert("shift键被按下")
        }
        if(event.altKey) {
            alert("alt键被按下")
        }
    }

    function myOnkeyUp() {
        console.log("按键被抬起")
    }
    // 获取元素内容
    let span = document.querySelector('span')
    console.log(span.innerHTML)
    // 修改
    span.innerHTML = "我在修改元素内容"
    // 修改页面结构
    span.innerHTML = "<h3>这是h3标签</h3>"

    let img = document.querySelector('img')
    console.dir(img)
    img.title = "这是已经修改完毕的title"
    img.onclick = function() {
        alert("你已经点击了这个图片")
    }

    console.dir(input)
    input.value = "这是一个按钮"
</script>
</html>